<!---->
<template>
    <div class="gold-con">
        <div class="header">
            <div class="left">
                <img :src="PIC_URL + '/myGoldcoin/jinbi_icon.png'" width="40" height="26">
                <span class="tip">我的金币</span>
                <span class="label">手机号：</span>
                <span class="info">{{userInfo.phoneMask}}</span>
                <span class="label">姓名：</span>
                <span class="info">{{userInfo.userIdCard&&userInfo.userIdCard.musername||'--'}}</span>
            </div>
            <div class="right">
                <span class="gz" @click="tabChange('goldrule')">查看金币规则</span>
                <img :src="PIC_URL + '/myGoldcoin/back_btn.png'" @click="tabChange('info')" width="83" height="30">
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div class="my-gold">
                    <div class="item jl">
                        <div class="top">
                            <span class="title">昨日奖励</span>
                            <!-- <span class="date">{{totalGoldInfo.create_time&&totalGoldInfo.create_time.split(' ')[0]||'--'}}</span> -->
                        </div>
                        <div class="gold">
                            <span class="num">{{(totalGoldInfo.yesterdayGold&&totalGoldInfo.yesterdayGold)||0}}</span>
                            <span class="tip">个</span>
                        </div>
                    </div>
                    <div class="item ye">
                        <div class="top">
                            <span class="title">金币余额</span>
                        </div>
                        <div class="gold">
                            <span class="num">{{(totalGoldInfo.totalGold-totalGoldInfo.totalExpendGold)||0}}</span>
                            <span class="tip">个</span>
                        </div>
                    </div>

                    <div class="gold-info">
                        <div class="con">
                            <span class="title">累计奖励</span>
                            <span>
                                <span class="num">{{totalGoldInfo.totalGold||0}}</span>
                                <span class="tip">个</span>
                            </span>
                        </div>
                        <div class="con">
                            <span class="title">已用金币</span>
                            <span>
                                <span class="num green">{{totalGoldInfo.totalExpendGold||0}}</span>
                                <span class="tip">个</span>
                            </span>
                        </div>
                    </div>
                    <!-- <div class="date-tip">奖励截止日期：{{totalGoldInfo.end_time||'--'}}</div> -->

                </div>
            </div>
            <div class="right">
                <p class="title">金币变动明细</p>
                <div class="orderContainer">
                    <div class="table-con">
                        <div  class="table" v-if="goldInfoList.length>0">
                            <div class="t-head">
                                <span class="t-left">日期</span>
                                <span>金额</span>
                                <span>到期时间</span>
                                <span class="t-right">备注</span>
                            </div>
                            <div class="t-data">
                                <div class="tr" v-for="(item,i) in goldInfoList" :key="i">
                                    <span class="t-left">{{item.create_time.split(' ')[0]}}</span>
                                    <span class="red">{{item.gold}}</span>
                                    <span>{{item.end_time.split(' ')[0]}}</span>
                                    <span class="t-right">{{{0:'返佣奖励',1:'积分奖励',2:'过期失效'}[item.change_status]}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="no-data" v-else>
                            <img :src="PIC_URL + '/myGoldcoin/wllj.png'" width="281" height="175" alt="">
                        </div>

                    </div>
                    <div>
                        <page
                            :pageSize="pageConfig.pageSize"
                            :currentPage="pageConfig.currentPage"
                            :total="pageConfig.total"
                            @onPage="pageChange"
                        >
                        </page>
                    </div>
                </div>
            </div>
        </div>
        
        

    </div>
</template>
<script>
import page from "./page";

export default {
    props:{
        goldInfoList:{
            type: Array,
            default: ()=> [],
        },
        totalGoldInfo:{
            type: Object,
            default: ()=> {},
        },
        userInfo:{
            type: Object,
            default: ()=> {},
        },
        total: {
            type: Number,
            default: 0
        }
    },
    components: {
        page
    },
    data() {
        return {
            tableData:[],
        };
    },
    computed:{
        pageConfig(){
            let obj = {
                pageSize: 9,
                currentPage: 1,
                total: this.total,
            }
            return obj;
        }
    },
    methods: {
        tabChange(d){
            this.$emit('tabChange',d)
        },
        pageChange(d){
            console.log('cccccc====>>>',d)
            this.pageConfig.currentPage = d;
            this.$emit('pageChange',d);
        }
    },
};
</script>

<style scoped lang="scss">
.gold-con{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    font-family: Microsoft YaHei;
    font-size: 0;
    .header{
        height: 46px;
        background: #31374D;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 52px 0 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #CFD7E5;
        .left{
            font-weight: bold;
            display: flex;
            align-items: center;
            .tip {
                font-size: 18px;
                font-weight: bold;
                color: #FFB36F;
                margin-right: 30px;
                margin-left: 7px;
            }
            .label {
                font-size: 16px;
                color: #9CB6FE;
            }
            .info {
                font-size: 16px;
                color: #E5EEFF;
                margin-right: 30px;
            }
        }
        .right{
            color: #B9BCC1;
            cursor: pointer;
            display: flex;
            align-items: center;
            .gz{
                font-size: 16px;
                text-decoration: underline;
                color: #E6AA85;
                margin-right: 15px;
            }
        }
    }
    .content{
        display: flex;
        .left{
            flex-basis: 364px;
            .my-gold {
                background: #fff;
                padding: 16px 4px 20px 16px;
                .item{
                    background-size: 100% 100%;
                    background-position: 100% 100%;
                    background-repeat: no-repeat;
                    margin-bottom: 10px;
                    height: 200px;
                    box-sizing: border-box;
                    padding: 20px 0 0 16px;
                    &.jl{
                        background-image: url($PIC_URL+'/myGoldcoin/bg_red_pc.png');
                    }
                    &.ye{
                        background-image: url($PIC_URL+'/myGoldcoin/bg_yel_pc.png');
                    }
                    .top {
                        text-align: left;
                        color: #fff;
                        font-size: 20px;
                        line-height: 20px;
                        .title {
                            margin-right: 20px;
                        }
                        .date{
                            
                        }
                    }
                    .gold{
                        text-align: center;
                        margin-top: 54px;
                        .num{
                            font-size: 56px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #FFFFFF;
                            line-height: 23px;
                        }
                        .tip{
                            font-size: 24px;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #FFFFFF;
                        }
                    }
                }
                .gold-info{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 46px;
                    margin-bottom: 45px;
                    .con{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-direction: column;
                        flex: 1;
                        height: 54px;
                        &:nth-child(1){
                            border-right: 1px solid #dedede;
                        }
                        .title{
                            font-size: 18px;
                            color: #333333;
                        }
                        .num{
                            font-size: 24px;
                            color: #EA2827;
                            &.green{
                                color: #18A722;
                            }
                        }
                        .tip{
                            font-size: 18px;
                            color: #666666;
                        }
                    }
                    
                }
                .date-tip{
                    font-size: 18px;
                    font-weight: 500;
                    color: #999999;
                    text-align: center;
                }
            }
        }
        .right{
            flex-grow: 1;
            .title{
                line-height: 44px;
                text-align: center;
                color: #31374D;
                font-size: 18px;
                background: #CFD7E5;
                border-bottom: 1px solid #CFD7E5;
                border-radius: 8px 8px 0px 0px;
                margin: 16px 16px 0 16px;
            }
            .orderContainer{
                border: 1px solid #CFD7E5;
                height: 562px;
                margin: 0  16px 20px;
                border-top:none;
                padding:10px 9px;
                box-sizing: border-box;
                background: #F7F8FA;
                border-radius: 0px 0px 8px 8px;
                .table-con{
                    background: #FFFFFF;
                    border: 1px solid #CFD7E5;
                    border-radius: 8px;
                    height: 486px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    .table {
                        width: 100%;
                        height: 100%;
                        
                        .t-head{
                            width: 100%;
                            font-size: 0;
                            background: #FFE7D7;
                            span{
                                display: inline-block;
                                vertical-align: top;
                                width: 25%;
                                text-align: center;
                                font-size: 16px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #64432D;
                                line-height: 16px;
                                padding: 15px 0 14px;
                                 box-sizing: border-box;
                                &.t-left{
                                    text-align: left;
                                    padding-left: 16px;
                                }
                                &.t-right{
                                    text-align: right;
                                    padding-right: 16px;
                                }
                            }
                        }
                        .t-data{
                            width: 100%;
                            .tr{
                                width: 100%;
                                &:nth-child(even){
                                    background:  #EEF0F4;
                                }
                                &:nth-child(odd){
                                    background: #FAFBFC;
                                }
                                span {
                                    display: inline-block;
                                    vertical-align: top;
                                    width: 25%;
                                    text-align: center;
                                    font-size: 16px;
                                    font-weight: 400;
                                    color: #2C3442;
                                    line-height: 16px;
                                    padding: 17px 0 15px;
                                    box-sizing: border-box;
                                    &.blue{
                                        color: #0063FF;
                                    }
                                    &.green{
                                        color: #18A722;
                                    }
                                    &.red {
                                        color: #EA2827;
                                    }
                                    &.t-left{
                                        text-align: left;
                                        padding-left: 16px;
                                    }
                                    &.t-right{
                                        text-align: right;
                                        padding-right: 16px;
                                    }
                                }
                            }
                        }
                    }
                    .no-data{
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #666666;
                        line-height: 24px;
                    }
                }
            }
        }
    }
}

</style>
